<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- Layout布局 -->
        <!-- 新增试题 -->
       <el-row>
          <el-col style="text-align: right;">
            <el-button @click="$router.push('/questions/new')" style="margin-right: 70px;" type="success" size="mini" icon="el-icon-edit">新增试题</el-button>
          </el-col>
        </el-row>
        <!-- form表单 -->
        <el-form label-width="70px">
            <el-row >
              <el-col :span="6">
                <el-form-item style="display: inline-block; width: 100%;" label="学科">
                <el-select  class="whidth"  size="mini" v-model="form.subjectListValue" @change="getCitys" placeholder="请选择">
                  <el-option  v-for="item in subjectList1" :key="item.id" :label="item.label" :value="item.value"
                     >
                    </el-option>
                </el-select>
              </el-form-item>
              </el-col>
              <el-col :span="6">
               <el-form-item style="display: inline-block; width: 100%;" label="二级目录">
                <el-select class="whidth"  size="mini" v-model="form.directorysValue" placeholder="请选择">
                  <el-option  v-for="item in directorys" :key="item.id" :label="item.label" :value="item.value"></el-option>
                </el-select>
               </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item style="display: inline-block; width: 100%;" label="标签">
                  <el-select class="whidth"  size="mini" v-model="form.tagsValue" placeholder="请选择">
                  <el-option  v-for="item in tags" :key="item.id" :label="item.label" :value="item.value"></el-option>
                </el-select>
               </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item style="display: inline-block; width: 100%;" label="关键字">
                  <el-input v-model="form.keyWords" size="mini" class="whidth"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row >
              <el-col :span="6">
                <el-form-item style="display: inline-block; width: 100%;" label="试题类型">
                <el-select  class="whidth"  size="mini" v-model="form.tableValue" placeholder="请选择">
                  <el-option  v-for="item in table" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              </el-col>
              <el-col :span="6">
               <el-form-item style="display: inline-block; width: 100%;" label="难度">
                <el-select class="whidth"  size="mini" v-model="form.difficultyValue" placeholder="请选择">
                  <el-option  v-for="item in difficulty" :key="item.id" :label="item.label" :value="item.value"></el-option>
                </el-select>
               </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item style="display: inline-block; width: 100%;" label="方向">
                  <el-select class="whidth"  size="mini" v-model="form.directionValue" placeholder="请选择">
                  <el-option  v-for="item in direction" :key="item" :label="item" :value="item"></el-option>
                </el-select>
               </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item style="display: inline-block; width: 100%;" label="录入人">
                  <el-select class="whidth"  size="mini" v-model="form.usernameValue" placeholder="请选择">
                  <el-option  v-for="item in username" :key="item.id" :label="item.username" :value="item.id"></el-option>
                </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row >
              <el-col :span="6">
                <el-form-item style="display: inline-block; width: 100%;" label="题目备注">
                  <el-input v-model="form.titleNotes" size="mini" class="whidth"></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="6">
               <el-form-item style="display: inline-block; width: 100%;" label="企业简称">
                <el-input v-model="form.corporateNickname" size="mini" class="whidth"></el-input>
               </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item style="display: inline-block; width: 100%;" label="城市">
                  <el-select  @change="cityChange" style="width: 39%;margin-right: 7px;" size="mini" v-model="form.provincesValue" placeholder="请选择">
                  <el-option  v-for="item in provincesData" :key="item" :label="item" :value="item"></el-option>
                </el-select>
                  <el-select style="width: 39%;"  size="mini" v-model="form.citysdataValue" placeholder="请选择">
                  <el-option  v-for="item in citysdata" :key="item" :label="item" :value="item"></el-option>
                </el-select>
               </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item style="display: inline-block; width: 83%;text-align: right;">
                  <el-button @click="clear" size="mini">清除</el-button>
                  <el-button @click="searchFor" type="primary" size="mini">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-row>
        </el-form>
        <el-row>
          <el-col :span="24">
            <el-alert :title='`数据一共有${total}条`' type="info" :closable="false" show-icon></el-alert>
            <!-- 列表 -->
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="number" label="试题编号"></el-table-column>
              <el-table-column prop="subject" label="学科"></el-table-column>
              <el-table-column prop="catalog" label="目录"> </el-table-column>
              <el-table-column prop="questionType" label="题型"></el-table-column>
              <el-table-column type="index" :index="indexFn" prop="question" label="题干" width="160"></el-table-column>
              <el-table-column prop="addDate" label="录入时间" width="200">
             <template #default="{row}">
                  {{ fromTime(row.addDate)}}
                </template>
              </el-table-column>
              <el-table-column prop="difficulty" label="难度"></el-table-column>
              <el-table-column prop="creator" label="录入人"> </el-table-column>
              <el-table-column label="操作" width="200">
                 <!-- 操作图标 -->
                 <template slot-scope="scope">
                      <i @click="view(scope.row)"  class="el-icon-view"></i>
                      <i @click="edit(scope.row)"  class="el-icon-edit"></i>
                      <i @click="dele(scope.row)" class="el-icon-delete"></i>
                      <i @click="check(scope.row)" class="el-icon-check"></i>
                  </template>
              </el-table-column>
            </el-table>
            <!-- 分页功能 -->
            <el-pagination
              style="margin-top: 20px; text-align: right"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              background
              :page-sizes="[5, 10, 20, 50]"
              layout="prev, pager, next,sizes,jumper"
              :total="pagination.counts"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </el-card>
      <!-- 预览蒙城弹窗 -->
      <el-dialog title="题目预览" :visible.sync="dialogVisible" width="56%">
          <el-row type="flex" class="row-bg" justify="space-between">
              <el-col :span="6">
                <span>【题型】:{{newTable.questionType}}</span>
              </el-col>
              <el-col :span="6">
                <span>【编号】:{{newTable.id}}</span>
              </el-col>
              <el-col :span="6">
                <span>【难度】::{{ newTable.difficulty }}</span>
              </el-col>
              <el-col :span="6">
                <span>【标签】:{{ newTable.tags }}</span>
              </el-col>
          </el-row>
           <el-row class="row-bg">
              <el-col :span="6">
                <span>【学科】:{{ dialogItemObj.subjectName }}</span>
              </el-col>
              <el-col :span="6">
                <span>【目录】:{{ dialogItemObj.directoryName }}</span>
              </el-col>
              <el-col :span="6">
                <span>【方向】:{{ dialogItemObj.direction }}</span>
              </el-col>
          </el-row>
          <hr>
            <span>【题干】:</span>
             <p style="color: blue">{{ clearHTMLTag(dialogItemObj.question) }}</p>
             <p  v-if="dialogItemObj.questionType !== '3'">选项:(以下选中的选项为正确答案)</p>
          <div v-if="dialogItemObj.questionType === '1'">
             <el-row v-for="item in dialogItemObj.options" :key="item.id">
                <el-col :span="6">
                  <el-radio-group :value="radio">
                    <el-radio :label="item.isRight">{{ item.title }}</el-radio>
                  </el-radio-group>
                </el-col>
            </el-row>
          </div>
         <div v-else-if="dialogItemObj.questionType === '2'">
           <el-row v-for="item in dialogItemObj.options" :key="item.id">
            <el-col :span="6">
              <el-checkbox
              onClick="javascript:return false"
              v-model="item.isRight"
              :true-label="1"
              :false-label="0"
              >{{ item.title }}
              </el-checkbox>
            </el-col>
          </el-row>
         </div>
          <hr />
          <span>【参考答案】:</span>
      <el-button @click="isShow = !isShow" type="danger" v-model="isShow"
        >视频答案预览</el-button
      >
      <div v-if="isShow">
        <video width="320" height="240" controls autoplay>
          <source src="movie.mp4" type="video/mp4" />
          <source src="movie.ogg" type="video/ogg" />
          <source src="movie.webm" type="video/webm" />
          您的浏览器不支持 video 属性。
        </video>
      </div>
      <hr />
      <el-row class="row-bg" >
        <el-col>
          <span >【答案解析】:{{ clearHTMLTag(dialogItemObj.answer) }}</span>
        </el-col>
      </el-row>
      <hr />
      <span>【题目备注】:{{ dialogItemObj.remarks }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary"  @click="dialogVisible = false">关闭</el-button>
      </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { list, remove, choiceAdd, detail } from '@/api/hmmm/questions.js'
import { provinces, citys } from '@/api/hmmm/citys.js'// 获取省份市区
import { simple as subjectList } from '@/api/hmmm/subjects.js'// 学科列表
import { simple as simpleDirectorys } from '@/api/hmmm/directorys.js'// 学科目录
import { simple as simpleTags } from '@/api/hmmm/tags'// 标签
// 题型,难度,方向
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
import { simple as enteredBy } from '@/api/base/users.js'// 入录人
export default {
  data () {
    return {
      total: '',
      subjectList1: '', // 学科列表
      directorys: '', // 学科目录
      tags: '', // 标签
      table: '', // 题型
      difficulty: '', // 难度
      direction: '', // 方向
      username: '', // 录入人
      provincesData: '', // 省份
      citysdata: '', // 城市
      form: {
        subjectListValue: '', // 学科信息value
        directorysValue: '', // 二级目录value
        tagsValue: '', // 标签
        keyWords: '', // 关键字
        tableValue: '', // 题型
        difficultyValue: '', // 难度
        directionValue: '', // 方向
        usernameValue: '', // 录入人
        provincesValue: '', // 省份
        citysdataValue: '', // 市
        keywords: '', // 关键词
        titleNotes: '', // 题目备注
        corporateNickname: ''// 企业昵称
      },
      newTable: {},
      dialogItemObj: {},
      radio: 1,
      // 下拉列表
      dialogVisible: false, // 预览模态框
      ShowDialog: false, // 删除提示模态框
      ShowDialogModal: '', // 模态框判断
      tableData: [], // 基础题库列表
      pagination: {
        counts: null, // 总页数
        page: 1, // 当前页码
        pages: null, // 总页数
        pagesize: 10 // 页大小
      },
      currentPage: 1, // 表示第几页
      checked: true,
      isShow: false
    }
  },
  async created () {
    this.questionsList()// 基础题库列表
    this.subjectList()// 学科列表
    this.table = questionType// 题型
    this.difficulty = difficulty// 难度
    this.direction = direction// 方向
    const res = await enteredBy()
    this.username = res.data
    this.provincesFn()// 获取省份
  },
  methods: {
    // 处理时间
    fromTime (timer) {
      const jsonDate = new Date(timer).toJSON()
      // 东八区需要加八小时
      const Datatimer = new Date(jsonDate).getTime() + 8 * 3600 * 1000
      return new Date(Datatimer)
        .toISOString()
        .replace(/T/g, ' ')
        .replace(/\.[\d]{3}Z/, '')
    },
    // 清空表单数据
    clear () {
      this.form = {}
      this.questionsList()
    },
    // 搜索
    async searchFor () {
      const { data } = await list({ page: this.pagination.page, pagesize: this.pagination.pagesize, keyword: this.form.keyWords })
      this.tableData = data.items
      this.total = data.counts
      this.tableData.forEach(item => {
        // 学科
        if (item.difficulty === '1') {
          item.difficulty = '简单'
        } else if (item.difficulty === '2') {
          item.difficulty = '一般'
        } else {
          item.difficulty = '困难'
        }
        // 题型
        if (item.questionType === '1') {
          item.questionType = '单选'
        } else if (item.questionType === '2') {
          item.questionType = '多选'
        } else {
          item.questionType = '简答'
        }
      })
    },
    // 预览
    async view (row) {
      this.dialogVisible = true// 显示模态框
      const res = await detail({ id: row.id })
      this.newTable = this.tableData.find((item) => item.id === row.id)
      this.dialogItemObj = res.data
    },
    // 编辑
    async edit (row) {
      /* console.log(row)
      const res = await update({ id: row.id }, { id: row.id })
      console.log(res) */
      this.$router.push(`/questions/new?id=${row.id}`)
    },
    // 删除
    async dele (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        await remove(id)// 发送请求
        this.questionsList()// 重新渲染
        this.$message.success('删除成功')// 提示
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 加入精选
    async check (id) {
      this.$confirm('此操作将该题库加入精选, 是否继续?', '提示', {
        type: 'info'
      }).then(async () => {
        await choiceAdd({ id: id.id, choiceState: 1 })// 发送请求
        this.questionsList()// 重新渲染
        this.$message.success('加入精选成功')
      }).catch(() => {
        this.$message.info('已取消精选')
      })
    },
    // 正则解析标签
    indexFn (index) {
      const question = this.tableData[index].question
      this.question = question.replace(/<\/?p[^>]*>/gi, '')
      this.tableData[index].question = this.question
      return question
    },
    clearHTMLTag (str) {
      if (str) {
        return str.replace(/<[^>]+>/g, '')
      }
    },
    // 处理页码大小
    handleSizeChange (val) {
      this.pagination.page = 1
      this.pagination.pagesize = val
      this.questionsList()
    },
    // 当前页变动时候触发
    handleCurrentChange (val) {
      this.pagination.page = val
      this.questionsList()
    },
    // 基础题库列表
    async questionsList () {
      const res = await list({ page: this.pagination.page, pagesize: this.pagination.pagesize })
      this.tableData = res.data.items// 基础题库列表
      this.pagination = res.data// 分页
      this.pagination.counts = res.data.counts// 总页数
      this.total = res.data.counts
      this.tableData.forEach((item) => {
      // 学科
        if (item.difficulty === '1') {
          item.difficulty = '简单'
        } else if (item.difficulty === '2') {
          item.difficulty = '一般'
        } else {
          item.difficulty = '困难'
        }
        // 题型
        if (item.questionType === '1') {
          item.questionType = '单选'
        } else if (item.questionType === '2') {
          item.questionType = '多选'
        } else {
          item.questionType = '简答'
        }
      })
    },
    // 获取省
    async provincesFn () {
      this.provincesData = provinces()
    },
    // 城市
    async cityChange () {
      const res = await citys(this.form.provincesValue)
      this.citysdata = res
    },
    // 学科列表
    async subjectList () {
      const res = await subjectList()
      this.subjectList1 = res.data
    },
    // 学科事件
    async getCitys () {
      const data = await simpleDirectorys({ subjectID: this.form.subjectListValue })// 目录列表
      const res = await simpleTags({ subjectID: this.form.subjectListValue })// 标签
      this.directorys = data.data
      this.tags = res.data
    }
  }
}
</script>

<style scoped lang ='scss'>
.el-icon-view{
   color: #409eff;
   background: #ecf5ff;
   border-color: #b3d8ff;
   width: 30px;
   height: 30px;
   text-align: center;
   line-height: 30px;
   border-radius: 50%;
   margin-right: 10px;
   }
  .el-icon-edit{
    color: #67c23a;
background: #f0f9eb;
border-color: #c2e7b0;
 width: 30px;
   height: 30px;
   text-align: center;
   line-height: 30px;
   border-radius: 50%;
   margin-right: 10px;
  }
  .el-icon-delete{
    color: #f56c6c;
background: #fef0f0;
border-color: #fbc4c4;
 width: 30px;
   height: 30px;
   text-align: center;
   line-height: 30px;
   border-radius: 50%;
   margin-right: 10px;
  }
  .el-icon-check{
    color: #e6a23c;
background: #fdf6ec;
border-color: #f5dab1;
 width: 30px;
   height: 30px;
   text-align: center;
   line-height: 30px;
   border-radius: 50%;
   margin-right: 10px;
  }
  .row-bg{
   margin-top: 20px;
  }
</style>
